<template>
    <view class="content">
			
        <div class="mui-content-padded">

			 <view class="styled-section-title" style="margin-top: 30px;">资源列表</view>
			 
			 <view class="cu-bar search bg-white" style="width: 100%;margin: 0 auto;margin-top: 20px;">
			 	<view class="search-form round">
			 		<text class="cuIcon-search"></text>
			 		<input :adjust-position="false" type="text" placeholder="输入产品名称" v-model="searchText" confirm-type="search"></input>
			 	</view>
			 	<view class="action">
			 		<button class="cu-btn bg-red shadow-blur round" @tap="searchShop">搜索</button>
			 	</view>
			 </view>
			 
			 <!-- @click="goProDetail(item)" -->
			    <view class="styled-list-container">
			        <view class="styled-list-item" hover-class="styled-list-item-hover" v-for="(item, index) in agentList" :key="item.id" >
			            <view class="info-container">
			                <view class="area" style="color: red;">{{ item.channelName }}</view>
			                <view class="title" style="margin-right: 10px;">{{ item.productStatus === 1 ? "上架" : (item.productStatus === 2 ? "下架" : "未配置") }}</view>
			            </view>
						<view class="info-container" style="margin-top: 10px;">
						    <view class="area">{{ item.productName }}</view>
						    <view class="area">{{ item.consumeCode }}</view>
						    <view class="area">{{ item.price }} <text style="font-size: 13px;">元</text></view>
						</view>
			        </view>
			    </view>
        </div>
        <cc-listPageView :totalNum="totalNum" :pageCount="pageSize" :curPageNum="current" @pageClick="pageClick">
        </cc-listPageView>
    </view>
</template>

<script>
	import common from 'common/common.js';
    export default {
        components: {
        },
        data() {
            return {

                totalNum: 0,
                current: 1,
                pageSize: 5,

                // 列表数组
                agentList: [],
                searchText: '',
            }
        },
        onLoad() {
            // this.getAgentList();
        },
        methods: {
			// 搜索产品
			searchShop(){
				this.current = 1;
				this.getAgentList();
			},
			// 获取代理列表
			getAgentList(){
				uni.showLoading({
					title: '加载中'
				});
				var that = this;
				uni.request({
					url: common.base_url+'/agent/agentForProductList',
					data:{
						current: that.current, // 当前页
						pageSize: that.pageSize,
						productName: that.searchText,
					},
					header:{
					},
					method: 'POST',
					success: res => {
						if(res.statusCode == 200){
							
							if(res.data.data.length > 0){
								that.agentList = res.data.data;
								that.totalNum = res.data.total;
							} else{
								uni.showToast({
									title:"暂无记录",
									icon: "success"
								})
							}
						} else {
							uni.showToast({
								title: res.msg,
								duration: 2000,
								icon:"error"
							})
						}
						uni.hideLoading();
					},
					fail: function(e) {
						uni.showToast({
							title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
							icon:"loading"
						})
					},
				})
			},
            // 列表条目点击事件
            goProDetail(item) {
				uni.navigateTo({
					url:'/pages/agent/adentDetail?agent='+ encodeURIComponent(JSON.stringify(item)),
				})
            },
            // 分页事件
            pageClick(tag) {
				console.log(tag)
                if (tag === 0) {
                    // 上一页 (不等于第一页)
                    if (this.current > 1) {

                        this.current--;
                        this.getAgentList();
                    }
                } else {
                    // 下一页 (不等于最后一页)
                    if (this.totalNum > (this.current * this.pageSize)) {
                        this.current++;
                        this.getAgentList();
                    }
                }
            },
        }
    }
</script>

<style>
    page {

        background-color: #f7f7f7;
    }

    .content {
        display: flex;
        flex-direction: column;

    }

    .mui-content-padded {
        margin: 0px 14px;
        /* background-color: #ffffff; */
    }
	
	
	 .styled-page {
	     background-color: #f0f0f0;
	     padding: 20px;
	     height: 100vh;
	   }
	 
	   .styled-section-title {
	     font-size: 24px;
	     font-weight: bold;
	     color: #007acc;
	     margin-bottom: 20px;
	     text-align: center;
	   }
	 
	   .styled-list-container {
	     background-color: #fff;
	     border-radius: 8px;
	     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	     overflow: hidden;
	   }
	 
	   .styled-list-item {
	     padding: 15px;
	     border-bottom: 1px solid #e0e0e0;
	     transition: background-color 0.3s ease;
	   }
	 
	   .styled-list-item:last-child {
	     border-bottom: none;
	   }
	 
	   .styled-list-item:hover {
	     background-color: #f5f5f5;
	   }
	 
	   .info-container {
	     display: flex;
	     justify-content: space-between;
	     align-items: center;
	   }
	 
	   .area {
	     font-size: 14px;
	     color: #4caf50;
	     margin-right: 10px;
	   }
	 
	   .title {
	     font-size: 16px;
	     font-weight: bold;
	     color: #007acc;
	   }
</style>